/**
* @description: 工单记录省信通 列表
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="工单记录" @goBack="goBack">
      <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>

    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
                    placeholder="请输入工单名称" @click="showSearch=true" @cancel="onSearch('')" />
      </view>
      <view class="task-list-container" v-if="taskList.length > 0">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
			  <!-- 列表循环   -->
			  <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)" v-if="prevState==='3'">
			  	<view class="task-top">
			  		<van-checkbox @click.self="clickCheckBox" style="margin-right: 5px;" v-if="isChoosable"
			  			v-model="item.isChecked" />
						<img src="../../../static/img/gdjl.png" alt="">
			  		<text class="equip-title">{{ item.inspectionDay }} {{item.name }} </text>
			  		<!--  0-待审批 2 审批通过  1 审批拒绝 -->
			  		<!-- <text class="equip-state-wc" v-if="item.approveState === '0'">
			  			待执行
			  		</text>
			  		<text class="equip-state-zxz" v-else-if="item.approveState === '1'">
			  			待审批
			  		</text>
			  		<text class="equip-state-wzx" v-else-if="item.approveState === '2'">
			  			已完成
			  		</text> -->
			  	</view>
			  	<hr class="patrol-hr">
			  	<ul class="task-list-main">
			  		<li>
			  			<text class="task-title">网管执行人员：</text>
			  			<text class="task-titles">{{ item.expertName }}</text>
			  		</li>
			  		<li>
			  			<text class="task-title">运维专责：</text>
			  			<text class="task-titles">{{ item.executiveName }}</text>
			  		</li>
			  	</ul>
			  	<hr class="task-dash-hr">
			  	<view class="top-task-main inspectionList">
			  		<view v-for="(item1,key1) in item.inspectionList" :key="key1" v-if="item.inspectionList.length === 2" :class="item1.inspectionState == '0' ? 'inspectionItem state-kzx' : item1.inspectionState == '1' ? 'inspectionItem state-ywc' : item1.inspectionState == '2' ? ' inspectionItem state-yyq' : ' inspectionItem state-dzx'  ">
			  			<text class="type">{{item1.inspectionNum}}</text>{{item1.time}}<text></text>
			  		</view>
					<view v-for="(item1,index) in item.inspectionList" :key="index" v-if="item.inspectionList.length === 3"  @click.stop="jump(item1,'xs')" :class="item1.inspectionState == '0' ? 'inspectionItems state-kzx' : item1.inspectionState == '1' ? 'inspectionItems state-ywc' : item1.inspectionState == '2' ? ' inspectionItems state-yyq' : ' inspectionItems state-dzx'  ">
						<text class="type">{{item1.inspectionNum}}</text>{{item1.time}}<text></text>
					</view>
			  	</view>
			  </view>
			  <view v-else>
				  <!-- 列表循环   -->
				  <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)" >
				    <view class="task-title">
				      <view class="task-title-main">
				        <img src="../../../static/img/gdjl.png" alt="">
				        <text class="task-title-main-text">{{ item.USERNAME }}发起的{{item.TYPESName}}出入工单</text>
				      </view>
				    </view>
				    <hr class="task-hr">
				    <view class="top-task-main">
				      <text class="task-big-ltitle">班组名称:</text>
				      <text class="task-small-ltitle">{{ item.ORGNAME }}</text>
				    </view>
				    <view class="top-task-main">
				      <text class="task-big-ltitle">发起时间:</text>
				      <text class="task-small-ltitle">{{ item.begingTime }}</text>
				    </view>
				    <view class="top-task-main">
				      <text class="task-big-ltitle">完成时间:</text>
				      <text class="task-small-ltitle">{{ item.complateTime }}</text>
				    </view>
				  </view>
			  </view>
            
          </van-list>
        </van-pull-refresh>
      </view>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" />
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup :showScreen="showScreen" @closePopup="showScreen=false"
                 @confirm="confirmCondition" @reset="reset" :otherList="otherList" :typeList="typeList" :orderList="orderList">

    </screenPopup>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../common/screenPopup2.vue";
import plateTitle from "../common/plateTitle.vue";
import {selectWorkLogList} from "../../../api/apiIndex";
import moment from "moment";

export default {
  name: 'workOrderRecord',
  components: {
    navBar,
    searchEquMatch,
    screenPopup,
    plateTitle
  },
  props: {},
  data() {
    return {
	  isChoosable:false,
      searchValue: "",
      showScreen: false,
      showSearch: false,
      taskList: [],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit: 20,
      orderList:[
        {
            VALUE: 0,
            TITLE:"全部"

          },{
            TITLE: "通信机房出入工单",
            VALUE:1

          },{
            TITLE: "通信网管出入工单",
            VALUE:2
          }
      ],
      typeList: [
        {
          TITLE: '本周',
          VALUE: 1,
        },
        {
          TITLE: '本月',
          VALUE: 2,
        },
        {
          TITLE: '上月',
          VALUE: 3,
        }
      ],
      otherList:[
        {
          TITLE:'按天',
        },
        {
          TITLE:'按月',
        }
      ],
      taskType: 0, // 右侧筛选工单类型
      taskStae: 1,
      begingTime:'',
      endTime:'',
	  taskList:[],
	  prevState:null
    };
  },
  computed: {},
  watch: {},
  onLoad(option) {
	  this.prevState = option.type;
	  // this.taskType = option.type
    this.selectWorkLogListW()
  },
  methods: {
    // 获取列表详情
    selectWorkLogListW() {
      
	  if(this.prevState === "3" ){
		let params = {
			page: this.page,
			limit: this.limit,
			name: this.searchValue,
			timeType:this.taskStae,
			startTime:this.begingTime,
			endTime:this.endTime,
		}
		this.$api.selectXSXJWorkLogList(params).then(res => {
			this.isLoading = false;
			this.refreshing = false;
			const backlogList = res.data.workLogList;
			
			backlogList.forEach((item)=>{
				// this.processingData(item)
				item.inspectionList.forEach((item1)=>{
					item1.time = moment(item1.inspectionStartDate).format("H:m");
				})
			})
			this.taskList = this.taskList.concat(backlogList);
			
			this.total = +res.data.total
		})
		  
	  }else{
		let params = {
			page: this.page,
			limit: this.limit,
			updateName: this.searchValue,
			workType: this.prevState,
			startTimeType:this.taskStae,
			startTime:this.begingTime,
			endTime:this.endTime,
		}
		this.$api.selectWorkLogList(params).then(res => {
		  this.isLoading = false;
		  this.refreshing = false;
		  this.taskList = this.taskList.concat(res.data.taskList.map(item => {
		    const TYPESName = item.TYPES === 'TXSP_MK_JF_TYPE' ? '通信机房' : (item.TYPES ===
		    	'TXSP_MK_WG_TYPE' ? '通信网管' : item.TYPES === 'TXSP_MK_YZ_TYPE' ? '印章使用' : '')
		    const begingTime = moment(item.UPDATETIME).format('YYYY-MM-DD HH:mm')
		    const complateTime = moment(item.REALITYLEAVETIME).format('YYYY-MM-DD HH:mm')
		    return {
		      TYPESName,
		      begingTime,
		      complateTime,
		      ...item}
		  }));
		  this.total = +res.data.total_number
		})  
	  }
      
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/operationApprove/index/index'
      })
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.selectWorkLogListW()
      } else {
        this.finished = true;
      }
    },
    screen() {
      this.showScreen = true;
    },
    confirmCondition(selected,beginTime,endTime,orderType) {
      this.taskType = orderType
      this.taskStae = selected
      this.begingTime = beginTime
      this.endTime = endTime
      this.onRefresh()
    },
    reset() {
      this.taskType = 0
      this.taskStae = 1
      this.begingTime = ''
      this.endTime = ''
      this.onRefresh()
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.selectWorkLogListW()
    },
    //  列表跳转
    jump(item) {
	  if(this.prevState === '3'){
		    
		uni.navigateTo({
			 url:`/pages/operationApprove/communicationNetWorkPerson/networkTeamIncomplete?date=${item.inspectionDay}&status=${item.approveState}`
		})
	  }else{
		  if (item.TYPES === 'TXSP_MK_JF_TYPE') {
		  	uni.navigateTo({
		  		url: `/pages/operationApprove/todoOrder/machineRoomApprove?ID=${item.ID}&AUDITSTATUS=${item.AUDITSTATUS}&AUDITSTATUSNAME=${item.AUDITSTATUSNAME}`
		  	})
		  } else if(item.TYPES === 'TXSP_MK_WG_TYPE') {
		  	uni.navigateTo({
		  		url: `/pages/operationApprove/todoOrder/networkOrderApprove?ID=${item.ID}&AUDITSTATUS=${item.AUDITSTATUS}&AUDITSTATUSNAME=${item.AUDITSTATUSNAME}`
		  	})
		  }else{
		  	uni.navigateTo({
		  		url: `/pages/operationApprove/sealApproval/sealDetailsApproval?id=${item.ID}`
		  	})
		  }
	  }
      
    },

  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;

  .header {
    position: sticky;
    top: 0;

    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }

    .header-right {
      display: flex;

      /deep/ .van-icon {
        font-size: px2vw(52);
        font-weight: bold;
      }

      /deep/ .van-icon-scan {
        margin-right: px2vw(12);
      }

      /deep/ .van-icon-filter-o {
        margin-left: px2vw(12);
      }
    }
  }

  .task-info-container,
  .task-assignment-item {
    border-radius: $border-radius-base;
    overflow: hidden;
    background-color: #ffffff;
  }

  .main-container {
    height: calc(100vh - #{px2vh(200)});
    .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .screen-type-item {
      margin-bottom: px2vh(30);

      .plate-title {
        margin-bottom: px2vh(36);
      }

      .screen-option-container {
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }

        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }

    .task-list-container {
      height: calc(100vh - #{px2vh(264)} - 38px);
      overflow-x: auto;
		
      .task-list {
        width: px2vw(1020);
        background: #fff;
        border-radius: px2vw(20) px2vh(20);
        padding-bottom: px2vh(30);
        margin: 0 px2vw(30) px2vh(30) px2vw(30);
		.task-top {
			width: calc(100% - #{px2vw(80)});
			margin-left: px2vw(40);
			height: px2vh(140);
			display: flex;

			img {
				width: px2vw(64);
				height: px2vw(64);
				margin-top: px2vh(40);
				float: left;
			}

			.equip-title {
				color: #333;
				font-size: px2vw(48);
				// width: px2vw(670);
				height: px2vh(48);
				line-height: px2vh(48);
				float: left;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: px2vh(48);
				margin-left: px2vw(25);
			}

			.equip-state-wc,
			.equip-state-wzx,
			.equip-state-zxz {
				display: flex;
				justify-content: center;
				align-items: center;
				width: px2vw(150);
				height: px2vh(50);
				font-size: px2vw(32);
				border-radius: px2vw(10);
				margin-top: px2vh(48);
				margin-left: px2vw(27);
				float: left;
				line-height: px2vh(50);
				//text-align:center;
			}

			.equip-state-wc {
				color: #417ADC;
				background: rgba(140,140,140,0.1);
			}

			.equip-state-wzx {
				color: #3CDA68;
				background: rgba(62, 218, 104, 0.1);

			}

			.equip-state-zxz {
				color: #FFAD0E;
				background: rgba(255, 180, 0, 0.1);
			}
		}
		.task-dash-hr{
			width: px2vw(940);
			border: px2vh(2) dashed #e5e5e5;
			margin-left: px2vw(40);
			margin-bottom: px2vh(42);
			position: relative;
			::before{
				content: "";
				width: 36px;
				height: 36px;
				position: absolute;
				display: inline-block;
				left: -17px;
				top: -17px;
				background-color: #F2F6FA;
			}
			::right{
				content: "";
				width: 36px;
				height: 36px;
				position: absolute;
				display: inline-block;
				right: -17px;
				top: -17px;
				background-color: #F2F6FA;
			}
		}
		.patrol-hr {
			width: px2vw(940);
			border: px2vh(1) solid #e5e5e5;
			margin-left: px2vw(40);
		}
		.inspectionList{
			width: px2vw(940);
			margin: 0 auto;
			padding: 0 px2vh(30);
			// background: red;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.inspectionItem{
				width: px2vw(430);
				height: px2vh(74);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2vh(37);
				text-align: center;
				.type{
					margin-right: px2vh(20);
				}
			}
			.inspectionItems{
				width: px2vw(240);
				height: px2vh(74);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2vh(37);
				text-align: center;
				.type{
					margin-right: px2vh(20);
				}
			}
			.state-kzx{
				background-color: #417ADC;
				color: #FFFFFF;
			}
			.state-ywc{
				background-color: #1ADA6C;
				color: #FFFFFF;
			}
			.state-yyq{
				background-color: #FF6363;
				color: #FFFFFF;
			}
			.state-dzx{
				background-color: rgba(153,153,153,0.1);
				color: #999999;
			}
			
		}
		.task-list-main {
			width: px2vw(940);
			//height: px2vh(266);
			margin-left: px2vw(40);
			padding-bottom: px2vh(30);
		}
		.task-list-main {
			width: px2vw(940);
			//height: px2vh(266);
			margin-left: px2vw(40);
			padding-bottom: px2vh(30);
		
			li {
				margin-top: px2vh(30);
				font-size: px2vw(36);
				display: flex;
				.task-title {
					width: auto;
					color: #666;
					padding: 0;
					margin: 0;
					display: inline-block;
				}
		
				.task-titles {
					color: #333;
				}
			}
		}
        .task-title {
          width: px2vw(940);
          height: px2vh(80);
          margin-left: px2vw(40);
          padding-top: px2vw(30);
          margin-bottom: px2vh(30);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .task-title-main {
            display: flex;
            align-items: center;
			li {
				margin-top: px2vh(30);
				font-size: px2vw(36);

				.task-title {
					color: #666;
				}

				.task-titles {
					color: #333;
				}
			}
            img {
              width: px2vw(64);
              height: px2vw(64);
            }
          }

          .task-title-main-text {
            width: px2vw(700);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: px2vw(20);
            font-size: px2vh(48);
          }

          .task-status {
            width: px2vw(123);
            height: px2vh(50);
            border-radius: px2vw(10);
            font-size: px2vw(32);
            text-align: center;
          }

          .task-status.blue {
            color: #417ADC;
            background: #E4ECFA;
          }

          .task-status.red {
            color: #FF7070;
            background: rgba(255, 112, 112, 0.1);
          }

          .task-status.yellow {
            color: #FFAD0E;
            background: rgba(255, 180, 0, 0.1);
          }

          .task-status.green {
            color: #3CDA68;
            background: rgba(62, 218, 104, 0.1);
          }
        }

        .task-hr {
          width: px2vw(940);
          border: px2vh(1) solid #e5e5e5;
          margin-left: px2vw(40);
          margin-bottom: px2vh(42);
        }

        .top-task-main {
          width: px2vw(900);
          font-size: px2vh(36);
          line-height: px2vh(62);
          // margin-left: px2vw(60);

          .task-big-ltitle,
          .task-big-rtitle {
            color: #666;
          }

          .task-small-ltitle,
          .task-small-rtitle {
            margin-left: px2vw(25);
            color: #333;
          }

          .task-big-rtitle {
            margin-left: px2vw(245);
          }
        }

      }
    }
  }
}

</style>
